import vue from '@vitejs/plugin-vue2'
import Icons from 'unplugin-icons/vite'
import AutoImport from 'unplugin-auto-import/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { ElementUiResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { defineConfig, loadEnv } from 'vite'
//https:github.com/vbenjs/vite-plugin-html/tree/main#readme
// https://blog.csdn.net/SilenceJude/article/details/127792103
import { createHtmlPlugin } from 'vite-plugin-html'
import { envParse } from 'vite-plugin-env-parse' //优化 import.meta.env 使用体验 https://juejin.cn/post/7356071892586168335
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import path from 'node:path'
console.log(
  // process.env.APP_NAME,
  process.env.NODE_ENV
)

const isPrd = process.env.NODE_ENV === 'production'

// https://vitejs.dev/config/
export default defineConfig(async ({ command, mode }) => {
  //根据当前工作目录中的 `mode` 加载 .env 文件, 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  // console.log(env)

  return {
    //https://vitejs.cn/vite3-cn/config/shared-options.html
    base: env.VITE_BASE,
    // base: './',
    publicDir: `${env.VITE_BASE}public`, // 默认'public' 用的时候总是加上public就可以了
    server: {
      host: '127.0.0.1',
      port: 3303, // 指定开发服务器端口。注意：如果端口已经被使用，Vite 会自动尝试下一个可用的端口，所以这可能不是开发服务器最终监听的实际端口。
      strictPort: true, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
      hmr: {
        // overlay: false
      }
    },
    define: {
      'process.env': process.env
    },
    envPrefix: 'VITE_', // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。默认： VITE_
    resolve: {
      alias: {
        '@': `${path.resolve(__dirname, 'src')}`,
        '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        '~element-ui': path.resolve(__dirname, 'node_modules/element-ui'),
        '~iview': path.resolve(__dirname, 'node_modules/iview')
      }
    },
    build: {
      /*
    `true`：Vite将在构建过程中使用合适的工具（如terser或esbuild）对JavaScript和CSS代码进行压缩，移除不必要的空白字符、注释、缩短变量名等，以减小文件体积，提高加载性能。
    `false`：禁用代码压缩。构建出的文件将保留原始的可读性较高的格式，但文件大小可能会较大，不利于网络传输和浏览器加载。
    */
      minify: isPrd,
      rollupOptions: {
        // 在这里配置 Rollup 选项
        // 例如，你可以添加自定义的 Rollup 插件、修改输入输出配置等 https://rollupjs.org/guide/en/#big-list-of-options
      }
    },
    css: {
      // 指定传递给 CSS 预处理器的选项(会被添加到所有SCSS文件的开头，以便引入变量和其他全局定义。这样可以确保变量文件在编译时被正确引用，而无需在每个SCSS文件中手动导入)。例如:
      preprocessorOptions: {
        scss: {
          additionalData: '@import "./src/style/variable.scss";',
          javascriptEnabled: true
        }
      }
    },
    plugins: [
      vue(),
      envParse(),
      createHtmlPlugin({
        minify: false, // 是否压缩 html
        entry: './src/main.js',
        template: './index.html',
        inject: {
          data: {
            title: env.VITE_APP_TITLE_NAME,
            injectScript: `<script src="./inject.js"></script>`
          },
          tags: [
            {
              injectTo: 'body-prepend',
              tag: 'div',
              attrs: {
                id: 'tag'
              }
            }
          ]
        }
      }),
      // https://juejin.cn/post/7012446423367024676  (unplugin-vue-components)
      Components({
        resolvers: [
          // https://www.npmjs.com/package/unplugin-icons/v/0.7.2
          IconsResolver({
            componentPrefix: 'uicon'
          }), // https://icones.js.org/
          ElementUiResolver()
        ], // 指定组件位置，默认是src/components
        dirs: ['src/components'],
        extensions: ['vue'],
        // 配置文件生成位置
        dts: 'src/components.d.ts',
        // 搜索子目录
        deep: true
      }),
      Icons({
        // // experimental
        // autoInstall: true,
        compiler: 'vue2',
        customCollections: {
          my: FileSystemIconLoader('./src/assets/svg', (svg) => {
            return svg.replace(/^<svg /, '<svg fill="currentColor" ')
          })
        }
      }),
      // https://github.com/vbenjs/vite-plugin-svg-icons
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
        /**
         * custom insert position
         * @default: body-last
         */
        inject: 'body-first',

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        customDomId: '__svg__icons__dom__'
      }),
      AutoImport({
        imports: ['@vueuse/core'],
        dts: 'src/auto-imports.d.ts'
      })
    ]
  }
})
